<template>
  <div id="home">
    <!-- homevideo -->
    <div class="home_video">
      <img v-if="flag" id="video" src="../assets/images/bxbj.png" alt="" />
      <video
        :style="{ opcicy: flag ? 0 : 1 }"
        muted
        data-autoplay
        loop="loop"
        autoplay="true"
      >
        <source src="../assets/video/web.mp4" type="video/mp4" />
      </video>
      <div class="container">
        <div class="home_title">
          <p>每一位游客</p>
          <span>都是风景和文化的代言人</span>
        </div>
      </div>
    </div>
    <!-- company description -->
    <div class="companydes" ref="1">
      <div
        class="container"
        ref="moveref"
        :class="{ upmove: moveindex === 1, downmove: true }"
      >
        <p>公司背景</p>
        <div class="con_text">
          云谷智游，强强联手打造智慧旅游平台。基于国家大力推广智慧旅游的大背景，及随着5G时代的到来，使物联网、云计算等技术快速发展，
          加上新媒体技术、智能终端应用的普及，为智慧旅游的大力发展提供了良好的基础。
          阿里云、中青旅投资控股（深圳）有限公司、杭州云谷智游科技有限公司，强强联手共同打造的智慧旅游平台——云谷智游，登上这一前沿高地。
        </div>
        <ul class="business">
          <li>
            <img src="../assets/images/cyk.png" alt="" />
            <p class="bus_title">景区畅游卡</p>
            <span>一卡免费游全国</span>
          </li>
          <li>
            <img src="../assets/images/showme.png" alt="" />
            <p class="bus_title">Showme Vlog</p>
            <span>智能一键生成视频</span>
          </li>
          <li>
            <img src="../assets/images/wrcar.png" alt="" />
            <p class="bus_title">景区智能无人观光车</p>
            <span>一键扫码，自由随行</span>
          </li>
          <li>
            <img src="../assets/images/wrplane.png" alt="" />
            <p class="bus_title">载人自动驾驶观光飞机</p>
            <span>景区智能无人飞车</span>
          </li>
          <li>
            <img src="../assets/images/zndy.png" alt="" />
            <p class="bus_title">智能导游</p>
            <span>智能一键生成视频</span>
          </li>
          <li>
            <img src="../assets/images/zhtc.png" alt="" />
            <p class="bus_title">智慧停车</p>
            <span>景区车况一览无余</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- solution -->
    <div class="solution" ref="2">
      <div class="container">
        <p class="solution_title">解决方案</p>
        <ul class="items">
          <li
            :class="activeIndex == index ? 'active' : ''"
            @click="solutionFn(index)"
            v-for="(item, index) in soluArr"
            :key="index"
          >
            <span>{{ item }}</span>
          </li>
        </ul>
        <div class="solu_con">
          <div
            class="f_box"
            ref="moveref3"
            :class="{ upmove: moveindex === 3, downmove: true }"
          >
            <ul class="contents">
              <li class="con" v-for="(item, index) in contents" :key="index">
                <div class="con_text">
                  <p>{{ item.conp }}</p>
                  <ul>
                    <li v-for="(item, index) in item.conliArr" :key="index">
                      {{ item }}
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
            <ul class="contents_right">
              <li class="right_item">
                <p>沉浸式体验</p>
                <span
                  >融合景区文化打造“我是中心”的专属Vlog，能实现一键转发。</span
                >
              </li>
              <li class="right_item">
                <p>平台化运营</p>
                <span
                  >系统预留外接口，可以集成检票系统、视频监控，连接高德地图、支付宝、飞猪等第三方系统，打造旅游生态系统。</span
                >
              </li>
              <li class="right_item">
                <p>文化旅游传播</p>
                <span
                  >通过游客分享实现景区文化传播，实现引流促进旅游经济发展。</span
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- experience -->
    <div class="experience" ref="3">
      <div class="container">
        <p>SHOWME VLOG产品展示</p>
        <ul
          class="steps"
          ref="moveref2"
          :class="{ upmove: moveindex === 2, downmove: true }"
        >
          <li class="step">
            <img src="../assets/images/step1.png" alt="" />
            <span>第一步</span>
            <p>小程序首页</p>
          </li>
          <li class="step">
            <img src="../assets/images/step3.png" alt="" />
            <span>第二步</span>
            <p>小程序扫脸</p>
          </li>
          <li class="step">
            <img src="../assets/images/step2.png" alt="" />
            <span>第三步</span>
            <p>找到打卡点</p>
          </li>
          <li class="step">
            <img src="../assets/images/step4.png" alt="" />
            <span>第四步</span>
            <p>生成Vlog</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- superiority -->
    <div class="superiority" ref="4">
      <div class="container">
        <p>平台优势</p>
        <div
          class="sups"
          ref="moveref4"
          :class="{ upmove: moveindex === 4, downmove: true }"
        >
          <ul>
            <!-- <li  class="right_show"></li> -->
            <li
              class="right_show"
              v-for="(item, index) in superiorityright"
              :key="index"
              @click="rightFn(index)"
            >
              <div
                class="is_show"
                :class="{ isitemshow: isitemshow !== index }"
                :style="is_showcon[index].bgcSrc"
              >
                <p>{{ is_showcon[index].is_showp }}</p>
                <div class="baseline"></div>
                <div class="basetext">
                  {{ is_showcon[index].is_showptext }}
                </div>
              </div>
              <div class="sups-right-itm" v-if="isitemshow !== index">
                <span>{{ item.span }}</span>
                <div class="right_img">
                  <img :src="item.imgSrc" alt="" />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- cooperation -->
    <div class="cooperation" ref="5">
      <div class="container">
        <p>合作景区</p>
        <div
          ref="moveref5"
          :class="{ upmove: moveindex === 5, downmove: true }"
        >
          <div class="cj_menu">
            <ul class="cj_tab">
              <li class="is_green">横店影视城</li>
              <li>杭州西湖</li>
              <li>杭州西溪湿地</li>
              <li>深圳华侨城</li>
              <li>深圳海上世界</li>
            </ul>
          </div>
          <transition-group name="fade" class="item-box">
            <div
              v-for="item in coopArr"
              class="coop-items"
              v-show="show == item.id ? true : false"
              :key="item.id"
            >
              <img :src="item.imgSrc" alt="" />
              <div class="item-des">
                <p>{{ item.cooptitle }}</p>
                <span>{{ item.coopspan }}</span>
              </div>
            </div>
          </transition-group>
        </div>
      </div>
    </div>
    <!-- support -->
    <div class="support" ref="6">
      <div class="container">
        <p>战略合作伙伴</p>
        <div class="dads_con">
          <ul class="dads">
            <li>
              <img
                src="../assets/images/zfb.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/aliyun.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/zql.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/ad.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/zgyd.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/xhzy.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/zfb.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/aliyun.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/zql.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/ad.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/zgyd.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
            <li>
              <img
                src="../assets/images/xhzy.png"
                alt=""
                style="width: 180px; height: 100px"
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- teamwork -->
    <div class="teamwork" ref="7">
      <div class="container">
        <div class="contact">
          <div class="bottom_log">
            <div class="b_log">
              <img src="../assets/images/logo.png" alt="" />
            </div>
            <p>完善旅游生态，深度行业合作，互惠互利</p>
          </div>
          <div class="b_text">
            <p>联系我们</p>
            <div>
              <img
                src="../assets/images/adress.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <span>浙江省杭州市西湖区西溪诚园守纯苑2幢501室</span>
            </div>
            <div>
              <img
                src="../assets/images/tel.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <span>17826807544</span>
            </div>
            <div>
              <img
                src="../assets/images/email.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <span>inc@yunguzhiyou.com</span>
            </div>
          </div>
          <div class="b_vx">
            <p>关注我们</p>
            <div class="vx">
              <div class="vx_code">
                <img src="../assets/images/ewm.png" alt="" />
                <span>扫一扫，联系我们</span>
              </div>
            </div>
          </div>
          <div class="b_vx vx_pro">
            <p>体验云谷</p>
            <div class="vx">
              <div class="vx_code">
                <img
                  src="../assets/images/xcxm.png"
                  alt=""
                  style="width: 100px; height: 100px"
                />
                <span style="margin-left: -10px">扫一扫，体验云谷智游</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a
        href="https://beian.miit.gov.cn/#/Integrated/index"
        target="_blank"
        class="web"
        >网站备案号 浙ICP备2021003178号-1</a
      >
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      clientHeight: "", //可视区域高度
      scroll: "", //滚动距离
      isitemshow: 0, //手风琴是否显示
      moveindex: 0, //做动画的索引
      soluArr: ["市场痛点", "解决方案"],
      activeIndex: 0,
      flag: true,
      show: 0,
      is_showcon: [
        {
          is_showp: "景区智能无人观光车",
          is_showptext:
            "一键扫码，自由随行。基于5G网络和网联自动驾驶技术，实现车辆在景区内自动驾驶，为游客提供更高品质的出游体验。",
          bgcSrc: [
            {
              background: "url(" + require("../assets/images/wrc.png") + ")",
            },
          ],
        },
        {
          is_showp: "载人自动驾驶观光飞机",
          is_showptext:
            "全备份安全设计、自动驾驶、智能指挥调度中心集群控制。这款安全、环保、智能的低空自动驾驶载人飞行器，为人类未来的智慧交通提供低空中短途交通运输解决方案。",
          bgcSrc: [
            {
              background: "url(" + require("../assets/images/wrfj.png") + ")",
            },
          ],
        },
        {
          is_showp: "智慧厕所",
          is_showptext:
            "利用物联网传感技术，结合移动互联网的优势，打造厕所实时感知平台，为智慧旅游提供更便捷、智能的服务。",
          bgcSrc: [
            {
              background: "url(" + require("../assets/images/zngc.png") + ")",
            },
          ],
        },
        {
          is_showp: "智慧导游",
          is_showptext:
            "“智慧导游系统”，有效整合GPS、北斗卫星、RFID等六大通讯技术，深度融合通信与信息技术、物联网技术、大数据等技术， 突出了游客互动体验和网络实时互动，实现无缝团队管理，从而极大改善和旅游体验和质量，是智慧旅游技术的一次历史性突 破，是当前国内领先进的智慧导游系统之一。",
          bgcSrc: [
            {
              background: "url(" + require("../assets/images/zhdy.png") + ")",
            },
          ],
        },
        {
          is_showp: "智能热餐售卖机",
          is_showptext:
            "将食品生产及配送交给专业协力厂商伙伴，集中精力于智慧零售渠道建设及数据运营，以平台共享理念打造轻资产创新商业模式",
          bgcSrc: [
            {
              background: "url(" + require("../assets/images/znsmj.png") + ")",
            },
          ],
        },
        {
          is_showp: "智慧停车系统",
          is_showptext:
            "用移动互联网的方式把停车场的时间、空间、周转率的信息跟用户直接连接起来，致力于打造智慧物联网的停车解决方案。",
          bgcSrc: [
            {
              background: "url(" + require("../assets/images/zntc.png") + ")",
            },
          ],
        },
      ],
      coopArr: [
        {
          id: 0,
          imgSrc: require("../assets/images/hdysc.png"),
          cooptitle: "横店影视城",
          coopspan:
            "横店影视城，是集影视、旅游、度假、休闲、观光为一体的大型综合性旅游区，旗下共有广州街·香港街、明清宫苑、秦王宫、清明上河图、华夏文化园、明清民居博览城、梦幻谷、屏岩洞府、大智禅寺、红军长征博览城、春秋·唐园、圆明新园等13个特色的影视拍摄基地和两座超大型的现代化摄影棚。",
        },
        {
          id: 1,
          imgSrc: require("../assets/images/xihu.png"),
          cooptitle: "杭州西湖",
          coopspan:
            "杭州西湖风景名胜区，位于浙江省杭州市中心，分为湖滨区、湖心区、北山区、南山区和钱塘区，景区总面积达49平方公里，其中湖面6.5平方公里。西湖傍杭州而盛，杭州因西湖而名。“天下西湖三十六，就中最美是杭州”。2011年6月24日“中国杭州西湖文化景观”正式被列入《世界遗产名录》",
        },
        {
          id: 2,
          imgSrc: require("../assets/images/xixi.png"),
          cooptitle: "杭州西湖湿地",
          coopspan:
            "浙江杭州西溪国家湿地公园位于浙江省杭州市西湖区和余杭区西北部，2009年7月7日，浙江杭州西溪国家湿地公园被录入国际重要湿地名录。2012年1月11日，杭州西溪湿地旅游区被正式授予“国家5A级旅游景区”称号，成为中国首个国家5A级景区的国家湿地公园。2013年10月31日被中央电视台评选为中国“十大魅力湿地”。",
        },
        {
          id: 3,
          imgSrc: require("../assets/images/szhqc.png"),
          cooptitle: "深圳华侨城",
          coopspan:
            "东部华侨城位于中国深圳市大梅沙，是国内首个集休闲度假、观光旅游、户外运动、科普教育、生态探险等主题于一体的大型综合性国家生态旅游示范区，由国家环境保护部和国家旅游局联合授予的首个 “国家生态旅游示范区”。",
        },
        {
          id: 4,
          imgSrc: require("../assets/images/szhssj.png"),
          cooptitle: "深圳海上世界",
          coopspan:
            "“海上世界”原为法国建造的一艘豪华游轮，原名ANCEVELLER，由著名的法国委纳译尔大西洋船厂建造，船高9层，长168M， 宽21M，排水量为14000吨。海上世界项目由“明华轮”及“海上世界广场”两部分组成。",
        },
      ],
      superiorityright: [
        {
          span: "载人自动驾驶观光车",
          imgSrc: require("../assets/images/wrcl.png"),
        },
        {
          span: "载人自动驾驶观光飞机",
          imgSrc: require("../assets/images/wrj.png"),
        },
        {
          span: "智慧厕所",
          imgSrc: require("../assets/images/gc.png"),
        },
        {
          span: "智慧导游系统",
          imgSrc: require("../assets/images/dy.png"),
        },
        {
          span: "智能热餐售卖机",
          imgSrc: require("../assets/images/smj.png"),
        },
        {
          span: "智慧停车系统",
          imgSrc: require("../assets/images/tc.png"),
        },
      ],
      contents: [
        {
          conp: "碎片化记录",
          conliArr: [
            "· 景区收入单一",
            "· 为游客提供消费型服务能力不足",
            "· 代理商能力考察困难",
          ],
        },
        {
          conp: "推广难触达用户",
          conliArr: [
            "· 销售体系建设难度大",
            "· 景区推广渠道不足",
            "· 代理商能力考察困难",
          ],
        },
        {
          conp: "急需AI赋能分析决策",
          conliArr: ["· 景区热点分析", "· 游客精准营销宣传", "· 宣传决策"],
        },
      ],
    };
  },
  methods: {
    // support  动画
    supportAnima() {
      var dads = document.querySelector(".dads");
      var offsetX = 0;
      var timer = null;
      timer = setInterval(scrollDidScroll, 10);

      function scrollDidScroll() {
        offsetX--;
        offsetX = offsetX < -1200 ? 0 : offsetX;
        dads.style.left = offsetX + "px";
      }
      dads.onmouseover = function () {
        clearInterval(timer);
      };
      dads.onmouseout = function () {
        timer = setInterval(scrollDidScroll, 10);
      };
    },
    // cooperation 切换
    cooperationFn() {
      var that = this;
      var items = document.querySelectorAll(".cj_tab>li");
      for (let i = 0; i < items.length; i++) {
        items[i].onclick = function (e) {
          for (var a = 0; a < items.length; a++) {
            items[a].className = "";
          }
          e.target.className = "is_green";
          that.show = i;
        };
      }
    },
    // soultion事件
    solutionFn(index) {
      this.activeIndex = index;
      var f_box = document.querySelector(".f_box");
      f_box.style.left = -index * 1200 + "px";
    },
    // superiority
    rightFn(index) {
      this.isitemshow = index;
    },
    //监听滚动
    scrollTop() {
      if (
        this.clientHeight >
        this.$refs.moveref.getBoundingClientRect().top + 200
      ) {
        this.moveindex = 1;
      }
      if (
        this.clientHeight >
        this.$refs.moveref3.getBoundingClientRect().top - 60
      ) {
        this.moveindex = 3;
      }
      if (this.clientHeight > this.$refs.moveref2.getBoundingClientRect().top) {
        this.moveindex = 2;
      }
      if (
        this.clientHeight >
        this.$refs.moveref4.getBoundingClientRect().top + 60
      ) {
        this.moveindex = 4;
      }
      if (
        this.clientHeight >
        this.$refs.moveref5.getBoundingClientRect().top + 60
      ) {
        this.moveindex = 5;
      }
    },
  },
  mounted() {
    this.clientHeight = document.documentElement.clientHeight;

    window.addEventListener("scroll", this.scrollTop);
    //this.$refs.obtain.getBoundingClientRect().top

    //调用cooperation中的事件
    this.cooperationFn();

    // 调用support动画
    this.supportAnima();

    // 等待视频加载  加载完成后执行的事件
    var video = document.querySelector("video");
    video.οncanplay = function () {
      this.flag == !this.flag;
    };
  },
};
</script>
<style scoped lang="less">
.downmove {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.upmove {
  transform: translateY(0px);
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

#home {
  position: relative;
  margin-top: 1px;
  height: auto;
  min-width: 1300px;

  .home_video {
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    min-height: 813px;

    video,
    #video {
      z-index: -9999;
      min-width: 1200px;
      top: -69px;
      right: 0;
      bottom: 0;
      position: fixed;
      width: 100%;
      min-height: 813px;
    }

    .container {
      position: fixed;
      z-index: -9999;
      transform: translateX(10%);
      height: 641px;

      .home_title {
        padding-top: 182px;

        p {
          font-size: 56px;
          font-family: MILanPro_DEMIBOLD--GB1-4, MILanPro_DEMIBOLD--GB1;
          font-weight: normal;
          color: #ffffff;
          padding-bottom: 20px;
          text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
        }

        span {
          font-size: 46px;
          font-family: MILanPro_DEMIBOLD--GB1-4, MILanPro_DEMIBOLD--GB1;
          text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
          font-weight: normal;
          color: #ffffff;
        }
      }
    }
  }

  .companydes {
    background-color: #fff;
    padding-bottom: 120px;
    margin-top: -150px;
    width: 100%;

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        margin: 50px 0 30px 0;
        font-size: 30px;
        font-family: MILanPro_DEMIBOLD--GB1-4, MILanPro_DEMIBOLD--GB1;
        font-weight: normal;
        color: #000000;
      }

      span {
        font-size: 20px;
        font-family: MILanPro--GB1-4, MILanPro--GB1;
        font-weight: normal;
        color: #64666c;
      }

      .com_img {
        margin-top: 23px;
      }

      .el-menu {
        background-color: none !important;
      }

      .con_text {
        width: 1200px;
        font-size: 16px;
        font-family: MILanPro--GB1-4, MILanPro--GB1;
        font-weight: normal;
        line-height: 26px;
        color: #666666;
      }

      .business {
        width: 100%;
        margin-top: 100px;
        display: flex;
        justify-content: space-between;

        img {
          width: 120px;
          height: 120px;
        }

        li {
          text-align: center;

          .bus_title {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin: 0px;
            margin-top: 25px;
          }

          span {
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
  }

  .solution {
    width: 100%;
    padding-bottom: 83px;
    background: url("../assets/images/bj.png") no-repeat;
    background-size: cover;

    .container {
      flex-direction: column;
      text-align: center;
      align-items: center;

      .solution_title {
        padding: 50px 0 60px 0;
        font-size: 30px;
        font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
        font-weight: normal;
        color: #ffffff;
      }

      .items {
        margin-left: 5px;
        display: flex;

        .active {
          position: relative;
          color: #42bb52 !important;

          &::before {
            position: absolute;
            top: 11px;
            left: -20px;
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50% 50%;
            background: #42bb52;
          }

          &::after {
            position: absolute;
            top: 15px;
            left: -16px;
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50% 50%;
            background: #99f4a5;
          }
        }

        li {
          justify-content: space-between;
          cursor: pointer;
          display: flex;
          align-items: center;
          cursor: pointer;
          margin: 0px 20px;
          font-size: 22px;
          font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
          font-weight: normal;
          color: #ffffff;
          text-align: center;
          width: 110px;
          height: 35px;

          span {
            font-size: 22px;
            font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
            font-weight: normal;
          }
        }
      }

      .solu_con {
        margin-top: 45px;
        width: 100%;
        height: 240px;
        position: relative;
        overflow: hidden;

        .f_box {
          width: 2400px;
          transition: all 0.2s linear;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;

          .contents {
            width: 1200px;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;

            .con {
              background: url("../assets/images/sphjl.png") no-repeat;
              background-size: cover;
              box-sizing: border-box;
              padding: 30px;
              margin: 5px;
              width: 385px;
              height: 240px;
              border-radius: 3px;
              display: flex;

              &:hover {
                transform: scale(1.05);
                transition: 0.2s all linear;
              }

              &:nth-child(2) {
                background: url("../assets/images/tgncdyh.png");
              }

              &:nth-child(3) {
                background: url("../assets/images/jxaifn.png");
              }

              .con_img {
                width: 159px;
                height: 162px;
              }

              .con_text {
                text-align: left;

                p {
                  padding-top: 15px;
                  padding-bottom: 23px;
                  font-size: 20px;
                  font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
                  font-weight: normal;
                  color: #ffffff;
                }

                li {
                  margin-bottom: 8px;
                  font-size: 14px;
                  font-family: MILanPro--GB1-4, MILanPro--GB1;
                  font-weight: normal;
                  color: #ffffff;
                }
              }
            }
          }

          .contents_right {
            width: 1200px;
            display: flex;
            justify-content: space-between;

            .right_item {
              box-sizing: border-box;
              width: 384px;
              height: 240px;
              padding: 0px 32px 24px;
              display: flex;
              flex-direction: column;
              border-radius: 3px;

              p {
                padding: 120px 0 12px;
                font-size: 20px;
                font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
                font-weight: normal;
                color: #000000;
              }

              span {
                font-size: 14px;
                font-family: MILanPro--GB1-4, MILanPro--GB1;
                font-weight: normal;
                color: #666666;
              }

              &:nth-child(1) {
                background: url("../assets/images/cjsty.png");
              }

              &:nth-child(2) {
                background: url("../assets/images/pthyy.png");
              }

              &:nth-child(3) {
                background: url("../assets/images/whlycb.png");
              }
            }
          }
        }
      }
    }
  }

  .experience {
    padding-bottom: 88px;
    width: 100%;
    background: #ffffff;
    padding-top: 50px;

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        padding-bottom: 7px;
        font-size: 30px;
        font-family: MILanPro_DEMIBOLD--GB1-4, MILanPro_DEMIBOLD--GB1;
        font-weight: normal;
        color: #000000;
      }

      span {
        font-size: 20px;
        font-family: MILanPro--GB1-4, MILanPro--GB1;
        font-weight: normal;
        color: #64666c;
      }

      .steps {
        width: 100%;
        margin-top: 57px;
        display: flex;
        justify-content: space-between;
        .step {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 260px;

          img {
            height: 478px;
            width: 100%;

            &:hover {
              transform: scale(1.1);
              transition: 0.3s all linear;
            }
          }

          span {
            margin-top: 20px;
            font-size: 16px;
            font-family: MILanPro--GB1-4, MILanPro--GB1;
            font-weight: normal;
            color: #666666;
          }

          p {
            padding-top: 2px;
            font-size: 20px;
            font-family: MILanPro--GB1-4, MILanPro--GB1;
            font-weight: normal;
            color: #333333;
          }
        }
      }
    }
  }

  .superiority {
    width: 100%;
    padding-bottom: 80px;
    background: url("../assets/images/bj2.png") no-repeat;
    background-size: cover;

    .container {
      display: flex;
      align-items: center;
      flex-direction: column;

      p {
        margin: 50px 0 60px 0;
        font-size: 30px;
        font-family: MILanPro_DEMIBOLD--GB1-4, MILanPro_DEMIBOLD--GB1;
        font-weight: normal;
        color: #000000;
      }

      .sups {
        width: 100%;
        ul {
          display: flex;
          width: 1200px;
          overflow: hidden;

          li {
            display: flex;
            height: 360px;
            border-right: 1px solid #e4e4e4;
            &:nth-child(6) {
              border-right: none;
            }
            .is_show {
              background-size: cover;
              box-sizing: border-box;
              padding-top: 48px;
              width: 690px;
              transition: all 0.5s;
              padding: 40px;
              box-sizing: border-box;
            }

            .isitemshow {
              width: 0;
              padding: 0;
              padding-top: 40px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: all 0.5s;
            }

            .sups-right-itm {
              width: 100px;
              background: linear-gradient(180deg, #ffffff 60%, #deffdc 100%);
              padding: 48px 28px 57px;
              box-sizing: border-box;
              position: relative;
            }

            .right_img {
              position: absolute;
              bottom: 57px;
              margin-left: 5px;
              width: 30px;
              height: 30px;
            }

            p {
              font-size: 20px;
              font-family: MILanPro_DEMIBOLD--GB1-4, MILanPro_DEMIBOLD--GB1;
              font-weight: normal;
              color: #ffffff;
              margin: 0;
            }

            span {
              display: block;
              font-size: 18px;
              text-align: center;
              font-family: MILanPro_DEMIBOLD--GB1-4, MILanPro_DEMIBOLD--GB1;
              color: #333333;
            }

            .baseline {
              margin-top: 66px;
              width: 30px;
              height: 4px;
              background: #ffffff;
            }

            .basetext {
              padding-top: 40px;
              font-size: 14px;
              font-family: MILanPro--GB1-4, MILanPro--GB1;
              font-weight: normal;
              color: #ffffff;
              line-height: 30px;
            }
          }
        }
      }
    }
  }

  .cooperation {
    padding-bottom: 56px;
    padding-top: 50px;
    width: 100%;
    background-color: #fff;

    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s;
    }

    .fade-enter,
			.fade-leave-to          
			/* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }

    .container {
      display: flex;
      align-items: center;
      flex-direction: column;

      .cj_menu {
        width: 837px;
        height: 66px;
        margin-top: 26px;
        background: #54b54e;

        .cj_tab {
          margin-left: 34px;
          height: 66px;
          display: flex;
          align-items: center;

          li {
            cursor: pointer;
            margin-right: 32px;
            font-size: 18px;
            font-family: MILanPro_NORMAL--GB1-4, MILanPro_NORMAL--GB1;
            font-weight: normal;
            color: #ffffff;
          }

          .is_green {
            font-size: 20px;
            font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }

      p {
        padding-top: 26px;
        padding-bottom: 5px;
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
      }

      span {
        font-size: 20px;
        font-family: MILanPro--GB1-4, MILanPro--GB1;
        font-weight: normal;
        color: #64666c;
      }

      .item-box {
        display: block;
        position: relative;
        width: 1200px;
        height: 360px;
      }

      .coop-items {
        position: absolute;
        top: 0;
        z-index: 5;
        left: 0;
        width: 1200px;
        height: 360px;
        display: flex;

        img {
          width: 692px;
          height: 360px;
        }

        .item-des {
          padding: 38px 41px 53px 37px;
          box-sizing: border-box;
          width: 431px;
          background: #26272b;
          position: relative;
          height: 360px;

          &::before {
            width: 23px;
            height: 18px;
            position: absolute;
            top: 39px;
            left: 43px;
            content: url("../assets/images/lt.png");
          }

          &::after {
            width: 23px;
            height: 18px;
            position: absolute;
            bottom: 40px;
            right: 43px;
            content: url("../assets/images/rb.png");
          }

          p {
            margin-top: 35px;
            padding: 0;
            padding-bottom: 15px;
            font-size: 22px;
            font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
            font-weight: normal;
            color: #ffffff;
          }

          span {
            font-size: 16px;
            line-height: 20px;
            font-family: MILanPro--GB1-4, MILanPro--GB1;
            font-weight: normal;
            color: #8e8e8e;
          }
        }
      }
    }
  }

  .support {
    width: 100%;
    padding-top: 50px;
    background: #f4f8f9;

    .container {
      flex-direction: column;
      align-items: center;

      p {
        text-align: center;
        font-size: 30px;
        font-family: MILanPro_MEDIUM--GB1-4, MILanPro_MEDIUM--GB1;
        font-weight: normal;
        color: #000000;
      }

      .dads_con {
        width: 1200px;
        overflow: hidden;
        position: relative;
        height: 100px;
        margin-top: 83px;
        padding-bottom: 85px;

        .dads {
          position: absolute;
          top: 0;
          display: flex;
          justify-content: space-around;

          li {
            width: 180px;
            margin: 0px 10px 0px;
            transition: all 0.2s linear;
            height: 100px;
            background: #fefefe;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
            border-radius: 8px;

            &:hover {
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }

  .teamwork {
    position: relative;
    box-sizing: border-box;
    padding-top: 60px;
    padding-bottom: 30px;
    width: 100%;
    height: 300px;
    background: #26272b;

    .container {
      display: flex;

      .contact {
        display: flex;

        .bottom_log {
          .b_log {
            width: 60px;
            height: 44px;
          }

          p {
            font-size: 14px;
            font-family: MILanPro_NORMAL--GB1-4, MILanPro_NORMAL--GB1;
            font-weight: normal;
            color: #ffffff;
            margin-top: 15px;
          }
        }

        .b_text {
          margin-left: 163px;
          margin-right: 92px;

          p {
            margin-bottom: 22px;
            font-size: 18px;
            font-family: MILanPro_NORMAL--GB1-4, MILanPro_NORMAL--GB1;
            font-weight: normal;
            color: #ffffff;
          }

          div {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
          }

          span {
            margin-left: 10px;
            font-size: 14px;
            font-family: MILanPro_NORMAL--GB1-4, MILanPro_NORMAL--GB1;
            font-weight: normal;
            color: #ffffff;

            &:nth-child(1) {
              margin-right: 15px;
            }
          }
        }

        .b_vx {
          margin-right: 62px;

          p {
            font-size: 18px;
            font-family: MILanPro_NORMAL--GB1-4, MILanPro_NORMAL--GB1;
            font-weight: normal;
            color: #ffffff;
            margin-bottom: 22px;
          }

          .vx {
            display: flex;

            .vx_code {
              display: flex;
              flex-direction: column;
              span {
                margin-top: 10px;
                font-size: 12px;
                font-family: MILanPro_NORMAL--GB1-4, MILanPro_NORMAL--GB1;
                font-weight: normal;
                color: #ffffff;
              }
            }
          }
        }
      }
    }

    .web {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      width: 100%;
      line-height: 43px;
      height: 43px;
      color: #ffffff;
      position: absolute;
      bottom: 0px;
      text-align: center;
    }
  }
}
</style>
